<template>
    <el-dialog @open="open" v-model="isOpen" :title="props.openType==='add'?'添加采购需求':'修改采购需求'" @close="close" style="width: 30%">
        <el-form ref="dataForm" :rules="rules" :model="form" label-width="100px" align="center">
            <el-form-item label="商品名" prop="skuId">
                <el-input v-if="props.openType==='edit'"  v-model="form.skuNameTemp"/>
                <SkuSearchInput v-if="props.openType==='add'" ref="skuIdInput"/>
            </el-form-item>
            <el-form-item label="采购数量" prop="skuNum">
                <el-input-number :disabled ="props.openType==='edit'"  v-model="form.skuNum"
                                 :min="1*1" controls-position="right" />
            </el-form-item>
            <el-form-item label="选择仓库" prop="wareId">
                <el-select v-model="form.wareId" placeholder="请选择">
                    <el-option v-for="ware in wares" :label="ware.name" :value = "ware.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button v-show='props.openType==="add"' type="primary" activity  @click="addWmsPurchaseDetail">添加</el-button>
                <el-button v-show="props.openType==='edit'" type="primary" activity  @click="updateWmsPurchaseDetail">更新</el-button>
                <el-button @click="close" type="success" activity >取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
    import SkuSearchInput from '@/components/common/SkuSearchInput.vue'
    import {ref,reactive} from 'vue'
    import request from '@/utils/request.js'
    import { ElMessage } from 'element-plus'
    const  emits = defineEmits(['close','reload'])

    let dataForm = ref(null)
    let props = defineProps(['openType','id'])
    let form = reactive({})
    let wares = ref([])
    let isOpen = ref(false)
    let skuIdInput = ref(null)
    defineExpose({isOpen})

    const rules = reactive({
            purchaseId: [{required: true,message: '请输入采购单id', trigger: 'blur'},],
            skuId: [{required: true,message: '请输入采购商品id', trigger: 'blur'},],
            skuNum: [{required: true,message: '请输入采购数量', trigger: 'blur'},],
            skuPrice: [{required: true,message: '请输入采购金额', trigger: 'blur'},],
            wareId: [{required: true,message: '请输入仓库id', trigger: 'blur'},],
            status: [{required: true,message: '请输入状态', trigger: 'blur'},],
    })
    function open(){
        request.post("/api/wmsWareInfo/getWmsWareInfoPage", {}).then(resp => {
            wares.value = resp.records
        })
        if(props.openType==='edit'){
            request.get(`/api/wmsPurchaseDetail/getWmsPurchaseDetailById/${props.id}`).then(resp => {
                for(let key in resp){
                    form[key] = resp[key]
                }
            })
        }else if(props.openType==="add"){
            for(let key in form){
                delete form[key]
            }
            form.skuNum = 1
            skuIdInput.value.selectId = null
        }
    }

    function close(){
        isOpen.value = false
        emits("close")
        dataForm.value.resetFields()//重置表单校验
    }

    function addWmsPurchaseDetail(){
        let skuId = skuIdInput.value.selectId
        form.skuId = skuId
        dataForm.value.validate((valid, fields) => {
            if (valid) {
                request.post("/api/wmsPurchaseDetail/add", form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '添加成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
    function updateWmsPurchaseDetail(){

        dataForm.value.validate((valid, fields)=> {
            if (valid) {
                request.post("/api/wmsPurchaseDetail/update",form).then(resp => {
                    emits("close")
                    emits("reload")
                    ElMessage({message: '修改成功！',type: 'success'})
                })
            }else{
                ElMessage({message: '缺少必填项！',type: 'error'})
            }
        })
    }
</script>

<style scoped>

</style>